<template>
  <div class="app-container">
    <el-card class="box-card" v-if="!isMobile">
      <div class="top-filter">
        <div class="dept-info">
          <div label="工厂" style="margin-right: 30px">工厂：{{ getFactoryName() || "-" }}</div>
          <div label="岗位" prop="stationName">岗位：{{ stationName || "-" }}</div>
        </div>

        <div @click="refresh" class="refresh" :class="isRefresh ? 'fresh' : ''">
          <el-button icon="refresh" circle />
        </div>
      </div>
    </el-card>

    <div class="item-content">
      <el-card class="content-card">
        <div class="card-title">
          <el-badge :value="todoNum.totalCount" :offset="[7, 5]" :show-zero="false" class="item">
            <div>待办任务</div>
          </el-badge>

          <el-select
            style="width: 200px; margin-left: 40px"
            v-model="post1"
            @change="selectCahnge"
            clearable
            placeholder="请选择岗位"
          >
            <el-option label="一工段/一号线/铸膜工艺段" value="0001/0002/0003" />
            <el-option label="一工段/一号线/涂膜工艺段" value="0001/0002/0004" />
          </el-select>
          <span
            @click="moreClick"
            style="color: #0044a0; margin-left: 20px; cursor: pointer"
            class="blueMore"
          >
            更多>>
          </span>
        </div>
        <el-tabs v-model="activeName" class="demo-tabs" style="margin-top: 20px">
          <el-tab-pane label="User" name="first">
            <template #label>
              <el-badge :value="todoNum.taskCount" :show-zero="false" class="item">
                <div class="tabs-title">待处理任务</div>
              </el-badge>
            </template>
            <todoTable :params="post1" v-if="activeName == 'first'"></todoTable>
          </el-tab-pane>
          <el-tab-pane label="Config" name="second">
            <template #label>
              <el-badge :value="todoNum.reportCount" :show-zero="false" class="item">
                <div class="tabs-title">待审核报表</div>
              </el-badge>
            </template>
            <todoTableReport :params="post1" v-if="activeName == 'second'"></todoTableReport>
          </el-tab-pane>
          <!-- <el-tab-pane label="Role" name="third">
            <template #label>
              <el-badge :value="todoNum.timeExpired" :show-zero="false" class="item">
                <div class="tabs-title">已超时</div>
              </el-badge>
            </template>
            <todoTable></todoTable>
          </el-tab-pane> -->
        </el-tabs>
      </el-card>
      <el-card class="content-card" style="margin-top: 10px">
        <div class="card-title" style="margin-bottom: 10px">当前告警</div>

        <alarmTable></alarmTable>
      </el-card>
    </div>
    <dragTool
      v-if="!isMobile"
      @log="handleLog"
      @shift="goShift"
      @succession="goSuccession"
    ></dragTool>
    <shiftLogs v-if="!isMobile" v-model:show="showLog" @history="openHistory"></shiftLogs>
    <historyLogs v-if="!isMobile" v-model:show="showHistory"></historyLogs>
  </div>
</template>
<script setup name="home">
import useUserStore from "@/store/modules/user";
import todoTable from "./components/todoTable.vue";
import todoTableReport from "./components/todoTableReport.vue";
import { statisToDoTasks } from "@/api/productionMgt/taskCenter";
import alarmTable from "./components/alarmTable.vue";
import dragTool from "./components/dragTool.vue";
import shiftLogs from "./components/shiftLogs.vue";
import historyLogs from "./components/historyLogs.vue";
import { useRouter } from "vue-router";
import { ref, reactive, toRefs, computed, onMounted } from "vue";
const { userDeptInfo, postInfo } = useUserStore();
const activeName = ref("first");
const router = useRouter();
const showLog = ref(false);
const showHistory = ref(false);
const isRefresh = ref(false);
const isMobile = ref(false);

const data = reactive({
  // form: {
  //   factory: "",
  //   name: "",
  // },
  todoNum: {
    taskCount: 0,
    reportCount: 0,
    timeExpired: 0,
    totalCount: 0,
  },
});
const post1 = ref("");
const { todoNum } = toRefs(data);
function selectCahnge(val){
  if(val){
    console.log(val.split('/'));
  }
  refresh()
}
function refresh() {
  getCount();
  const mormal = activeName.value;
  activeName.value = "";
  setTimeout(() => {
    activeName.value = mormal;
  }, 30);
}
function getFactoryName() {
  let name = "-";
  if (userDeptInfo.factoryNames && userDeptInfo.factoryNames.length) {
    name = userDeptInfo.factoryNames.join("   ,  ");
  }
  return name;
}

const stationName = computed(() => {
  const nameList = postInfo.map((el) => el.postName);
  return nameList.join("，");
});

function moreClick() {
  console.log(activeName);
  // 跳转任务中心
  if (activeName.value == "first") {
    // 移动端跳转
    if (isMobile.value) {
      window.location.href = window.location.origin + "/mobile/taskCenter";
      return;
    }
    router.push("prodM/taskCenter");
  }
  // 跳转任务报表
  if (activeName.value == "second") {
     // 移动端跳转
    if (isMobile.value) {
      window.location.href = window.location.origin + "/mobile/taskReport";
      return;
    }
    router.push("prodM/taskReport");
  }
}

function handleLog() {
  showLog.value = !showLog.value;
}
function openHistory() {
  showLog.value = false;
  showHistory.value = true;
}
function goShift() {
  router.push("prodM/changeShifts");
}

// 获取代办数量
function getCount() {
  statisToDoTasks({}).then((res) => {
    todoNum.value.taskCount = res?.data?.taskCount;
    todoNum.value.reportCount = res?.data?.reportCount;
    todoNum.value.totalCount = res?.data?.totalCount;
  });
}

function goSuccession() {
  router.push({ path: "prodM/changeShifts", query: { type: "home" } });
  // router.push({ name: "ChangeShifts", params: { type: "home" } });
}
getCount();
function getUrlParams() {
  const url = window.location.href;
  const regex = /[?&]([^=#]+)=([^&#]*)/g;
  let params = {};
  let match;
  while ((match = regex.exec(url))) {
    params[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
  }
  return params;
}

onMounted(async () => {
  let urlPad = getUrlParams();

  console.log(urlPad, "====urlPad");
  if (urlPad && urlPad.isMobile) {
    isMobile.value = true;
  }
});
</script>
<style lang="scss" scoped>
@import "@/assets/styles/variables.module";

.app-container {
  position: relative;
  padding: 10px !important;
}

.info-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.box-card {
  margin-bottom: 10px;

  :deep(.el-card__body) {
    padding: 8px 20px !important;
  }

  .top-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .refresh {
      cursor: pointer;
    }

    .fresh {
      animation: newframes 2s;
    }

    @keyframes newframes {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(-360deg);
      }
    }
  }

  :deep(.el-form-item--default) {
    margin-bottom: 0;
  }
}

.dept-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.item-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;

  .content-card {
    width: 100%;
  }

  :deep(.el-card__body) {
    padding-left: 0 !important;
  }

  .card-title {
    padding-left: 10px;
    border-left: 5px solid $--color-primary;
  }

  .demo-tabs {
    padding-left: 15px;
  }

  .el-tabs {
    width: 100%;

    .tabs-title {
      width: 100px;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
    }
  }
}

.item-content .box-card:not(:last-child) {
  margin-bottom: 8px;
}
</style>
